<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-20 11:24:04
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-29 14:43:30
 * @FilePath: \cxl-driving-training\src\views\drivingSchoolManagement\drivingSchool\edit\Index.vue
-->
<template>
    <div class="page-box-detail" ref="pageBoxRef">
        <titleVue :title="data.operation.type === 'create' ? '新增' : '编辑'" big="true" />

        <formVue ref="formRef" :data="data.formData" :disabled="data.operation.type === 'look' ? true : false" />

        <!-- 驾校风格 -->
        <div class="style-box">
            <div class="title">驾校主题：</div>
            <div class="content">
                <el-button @click="data.onOpenDialog">配置</el-button>
            </div>
        </div>

        <!-- 取消 保存 -->
        <div class="operation">
            <el-button @click="data.onCancel"> {{ data.operation.type === 'look' ? '返回' : '取消' }}</el-button>
            <el-button type="primary" @click="data.onSave(formRef)" v-if="data.operation.type !== 'look'"
                >保存</el-button
            >
        </div>

        <!-- 驾校风格弹窗 -->
        <ThemeDialogVue
            :style-info="data.dialog.styleInfo"
            :visible="data.dialog.visible"
            @close="data.dialogClose"
            @confirm="data.dialogConfirm"
        />
    </div>
</template>
<script setup lang="ts">
import titleVue from '@/components/title/Index.vue'
import { reactive, ref } from 'vue'
import DrivingSchoolOperation from '.'
import formVue from '@/components/form/Index.vue'
import ThemeDialogVue from '../theme/Index.vue'

const pageBoxRef = ref()
const formRef = ref()

const data = reactive(new DrivingSchoolOperation())
</script>
<style scoped lang="scss">
.operation {
    display: flex;
    justify-content: center;
    margin: 50px 0 100px 0;
    > button {
        margin: 0 30px;
    }
}
.style-box {
    display: flex;
    align-items: center;
    .title {
        font-size: 14px;
        margin-right: 12px;
        width: 170px;
        text-align: right;
        font-weight: bold;
    }
}
</style>
